<template>
    <n-tooltip :disabled="!showTooltip">
        <template #trigger>
            <n-button
                v-bind="props"
                size="tiny"
                :text="text"
                :quaternary="quaternary"
                @click.stop="handleClick"
                bordered
                :disabled="props.disabled">
                <n-icon :size="props.size">
                    <slot></slot>
                </n-icon>
            </n-button>
        </template>
        {{ showTooltip && props.tooltip }}
    </n-tooltip>
</template>

<script setup lang="ts">
import { buttonProps } from 'naive-ui'
import type { PropType } from 'vue'
import { computed } from 'vue'

// buttonProps['onClick'] = null

// const type = buttonProps.type
// const size = buttonProps.size

const props = defineProps({
    // 继承原有的属性
    // ...buttonProps,
    // 自己扩展属性
    type: {
        type: String as PropType<
            | 'default'
            | 'tertiary'
            | 'primary'
            | 'info'
            | 'success'
            | 'warning'
            | 'error'
        >,
    },
    size: {
        type: String as PropType<'small' | 'tiny' | 'middle' | 'large'>,
        default: 'middle',
    },
    disabled: {
        type: Boolean,
        default: false,
    },
    tooltip: {
        type: String,
        default: null,
    },
    text: {
        type: Boolean,
        default: false,
    },
    quaternary: {
        type: Boolean,
        default: false,
    },
    secondary: {
        type: Boolean,
        default: true,
    },
})

const emit = defineEmits(['click'])

function handleClick() {
    console.log('handleClick click')

    emit('click')
}

const showTooltip = computed(() => {
    return !!props.tooltip
})
</script>
<script lang="ts">
export default {
    name: 'MiniIconButton',
}
</script>
